<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>精灵云 | 做国内最专业的容器云管理平台(内测版)</title>
	<link rel="stylesheet" type="text/css" href="css/main.min.css">
	<link rel="stylesheet" href="css/index.min.css">
	<script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
	<!-- header -->
	<div class="header" style="background-image: url(images/user/userbk.jpg); height: 691px;background-size: 1920px 691px;">
		<div class="header-top" style="border: 0;">
			<div class="w1330" style="overflow: hidden">
				<a class="header-top-logo fl" href="#"><img src="images/logo.png" title="精灵云 | 做国内最专业的容器云管理平台"></a>
				<div class="header-top-nav fr">
					<div class="h-t-nav-option"><a href="#">首页</a></div>
					<div class="h-t-nav-option"><a href="#">控制台</a></div>
					<div class="h-t-nav-option"><a href="#">产品</a></div>
					<div class="h-t-nav-option"><a href="#">文档</a></div>
					<div class="h-t-nav-option"><a href="#">精灵学院</a></div>
					<div class="h-t-nav-option"><a href="#">加入我们</a></div>
					<div class="h-t-nav-option user-info">
						<span class="user-header-img"></span><p class="user-name">Emma</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<div class="user-manage">
							<span class="span1"></span>
							<span class="span2"></span>
							<a class="first" href="#">用户中心</a>
							<a href="#">退出</a>
						</div>
					</div>
					<script>
						$('.user-manage').find('.first').hover(function(){
							$('.user-manage').find('.span1').css({borderBottomColor: '#6FB6F4'})
						},function(){
							$('.user-manage').find('.span1').css({borderBottomColor: '#1898FB'})
						})
					</script>
				</div>
			</div>
		</div>
		<div class="header-user"></div>
	</div>
	<!-- header end -->

	<!-- container -->
	<div class="container">
		<div class="container-user-nav">
			<div class="c-u-nav-options">
				<div class="c-u-nav-option option1"><a href="">用户总览</a><span></span></div>
				<div class="c-u-nav-option option2"><a href="">帐户充值</a><span></span></div>
				<div class="c-u-nav-option option3 active"><a href="">账单信息</a><span></span></div>
				<div class="c-u-nav-option option4"><a href="">修改密码</a><span></span></div>
			</div>
		</div>
		<div class="user-infos-box">
			<div class="user-info-one">
				<span class="icon"></span>
				<div class="user-info fl">
					<div class="header-img fl"></div>
					<div class="info fl">
						<span id="username" class="one">用&nbsp;&nbsp;户&nbsp;名：<p>Emma Watson</p><a class="fr" href="#">修改密码</a></span>
						<span id="createtime" class="two">登录时间：<p>2015年3月5日</p></span>
						<span id="useremail" class="three">电子邮件：<p>EW@ghostcloud.cn</p></span>
						<span id="usertel" class="four">手机号码：<p>1380008000</p></span>
					</div>
				</div>
				<div class="user-balance fr">
					<div class="one"></div>
					<div class="two"></div>
					<div class="three"></div>
					<div class="content">
						<p>账户余额</p>
						<em>38.80 <b>元</b></em>
						<span>我要充值</span>
					</div>
				</div>
			</div>
			<div class="user-info-two">
				<span class="icon"></span>
				<div class="title">
					Emma的账单查询结果：
				</div>
				<div class="row">
					<div class="col">
						<span>项目：</span><p>私有主机</p>
					</div>
					<div class="col">
						<span>数量：</span><p>3</p>
					</div>
					<div class="col">
						<span>总时长：</span><p>200小时</p>
					</div>
					<div class="col">
						<span>金额：</span><p class="red">120元</p>
					</div>
				</div>
				<div class="row">
					<div class="col">
						<span>项目：</span><p>公有主机</p>
					</div>
					<div class="col">
						<span>数量：</span><p>3</p>
					</div>
					<div class="col">
						<span>总时长：</span><p>200小时</p>
					</div>
					<div class="col">
						<span>金额：</span><p class="red">120元</p>
					</div>
				</div>
				<div class="row">
					<div class="col">
						<span>项目：</span><p>精灵云主机</p>
					</div>
					<div class="col">
						<span>数量：</span><p>3</p>
					</div>
					<div class="col">
						<span>总时长：</span><p>200小时</p>
					</div>
					<div class="col">
						<span>金额：</span><p class="red">120元</p>
					</div>
				</div>
				<div class="row total">
					<div class="col">
						<span>合计：</span><p>120元</p>
					</div>
				</div>
			</div>
			<div class="user-info-three">
				<span class="icon"></span>
				<div class="content">
					<p>当余额少于</p>
					<select>
						<option value="0">请选择</option>
						<option value="1">30</option>
						<option value="2">50</option>
						<option value="3">100</option>
						<option value="4">150</option>
					</select>
					<p>元时，通知我。</p>
					<span class="btn-sure">确定</span>
				</div>
			</div>
		</div>
	</div>
	<!-- container end -->

	<!-- footer -->
	<div class="footer">
		<div class="footer-top">
			<div class="w1330 oh">
				<div class="f-t-left fl">
					<img class="ewm fl" src="images/ewm.jpg">
					<div class="contact fl">
						<h3 class="title">联系我们：</h3>
						<p>地址：成都市高新区天府大道中段500号</p>
						<p>邮箱：ghostcloud@ghostcloud.cn</p>
						<p class="last-child">电话：028-65785728</p>
					</div>
				</div>
				<div class="footer-nav fr">
					<div class="option"><a href="#">控制台</a></div>
					<div class="option"><a href="#">文档</a></div>
					<div class="option"><a href="#">精灵学院</a></div>
					<div class="option"><a href="#">加入我们</a></div>
				</div>
				<div class="footer-nav fr mgr100">
					<div class="option"><a href="#">私有云管理</a></div>
					<div class="option"><a href="#">公有云管理</a></div>
					<div class="option"><a href="#">使用精灵云容器</a></div>
					<div class="option"><a href="#">容器化应用</a></div>
				</div>
			</div>
		</div>
		<div class="footer-bottom">
			<div class="w1330 oh">
				Copyright © 2015-2016 Ghostcloud 成都精灵云科技有限公司 ｜蜀ICP备14013440号-2
			</div>
		</div>
	</div>
	<!-- footer end -->
</body>
</html>